.xy-flow {
  --xy-resize-background-color-default: #3367d9;
}

.xy-flow__resize-control {
  position: absolute;
}

.xy-flow__resize-control.left,
.xy-flow__resize-control.right {
  cursor: ew-resize;
}

.xy-flow__resize-control.top,
.xy-flow__resize-control.bottom {
  cursor: ns-resize;
}

.xy-flow__resize-control.top.left,
.xy-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}

.xy-flow__resize-control.bottom.left,
.xy-flow__resize-control.top.right {
  cursor: nesw-resize;
}

/* handle styles */
.xy-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  transform: translate(-50%, -50%);
}

.xy-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.xy-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.xy-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.xy-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.xy-flow__resize-control.handle.top.left {
  left: 0;
}
.xy-flow__resize-control.handle.bottom.left {
  left: 0;
}
.xy-flow__resize-control.handle.top.right {
  left: 100%;
}
.xy-flow__resize-control.handle.bottom.right {
  left: 100%;
}

/* line styles */
.xy-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}

.xy-flow__resize-control.line.left,
.xy-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}

.xy-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}

.xy-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}

.xy-flow__resize-control.line.top,
.xy-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}

.xy-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}

.xy-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
